<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业管理系统 - 数据统计</title>
    <link rel="stylesheet" href="css/all.min.css">
    <link rel="stylesheet" href="css/backData.css">
    <script src="js/chart.js"></script>
    <script src="js/jquery.js"></script>
</head>

<body>
    <!-- 左侧导航栏 -->
    <div class="sidebar">
        <div class="logo">
            <div class="logo-text">后台管理系统</div>
        </div>

        <a href="backVideo.html" class="nav-item">
            <i class="fas fa-video"></i>
            <span>视频管理</span>
        </a>
        <a href="backDanmaku.html" class="nav-item">
            <i class="fas fa-comment-dots"></i>
            <span>弹幕管理</span>
        </a>
        <a href="backReview.html" class="nav-item">
            <i class="fas fa-check-circle"></i>
            <span>视频审核</span>
        </a>
        <a href="backComment.html" class="nav-item">
            <i class="fas fa-comments"></i>
            <span>评论管理</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-chart-line"></i>
            <span>数据统计</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-clipboard-list"></i>
            <span>日志管理</span>
        </a>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <!-- 顶部工具栏 -->
        <div class="top-bar">
            <div class="search-box">

            </div>

            <div class="user-actions">
                <div class="notification">
                    <i class="fas fa-bell"></i>
                </div>
                <div class="user-profile">
                    <div class="user-avatar">AD</div>
                    <div class="username">管理员</div>
                </div>
            </div>
        </div>

        <!-- 内容区域 - 数据统计模块 -->
        <div class="content-area">
            <h1 class="section-title"><i class="fas fa-chart-line"></i> 数据统计</h1>

            <!-- 日期范围选择器 -->


            <!-- 数据统计卡片 -->
            <div class="stats-cards">
                <div class="stat-card video">
                    <div class="stat-title"><i class="fas fa-video"></i> 视频总数</div>
                    <div class="stat-value" id="statVideo">8,542</div>
                </div>
                <div class="stat-card danmaku">
                    <div class="stat-title"><i class="fas fa-comment-dots"></i> 今日弹幕</div>
                    <div class="stat-value" id="content">124,680</div>
                </div>
                <div class="stat-card review">
                    <div class="stat-title"><i class="fas fa-check-circle"></i> 待审视频</div>
                    <div class="stat-value" id="videoPlay">286</div>
                </div>
                <div class="stat-card comment">
                    <div class="stat-title"><i class="fas fa-comments"></i> 总评论</div>
                    <div class="stat-value" id="allComment">5,428</div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="charts-container">
                <div class="chart-card">
                    <div class="chart-header">
                        <div class="chart-title">视频发布趋势</div>
                        <div class="chart-actions">
                            <div class="chart-btn active" id="month" value="month">月</div>
                            <div class="chart-btn" id="year" value="year">年</div>
                        </div>
                    </div>
                    <div class="chart-container">
                        <table class="trend-table">
                            <thead>
                                <tr>
                                    <th class="trend-header trend-date">日期</th>
                                    <th class="trend-header trend-count">发布数量</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

                <div class="chart-card">
                    <div class="chart-header">
                        <div class="chart-title">视频状态分布</div>
                    </div>
                    <div class="chart-container">
                        <table class="status-table">
                            <thead>
                                <tr>
                                    <th class="status-header status-name">视频状态</th>
                                    <th class="status-header status-percent">占比</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="status-row">
                                    <td class="status-name published">未审核</td>
                                    <td class="status-percent">70%</td>
                                </tr>
                                <tr class="status-row">
                                    <td class="status-name draft">已审核</td>
                                    <td class="status-percent">20%</td>
                                </tr>
                                <tr class="status-row">
                                    <td class="status-name reviewing">已删除</td>
                                    <td class="status-percent">10%</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <script src="js/backData.js">

        </script>
</body>

</html>